FormMessageType = function() {
	return {
		ERROR : 0,
		WARNING : 1,
		INFO : 2
	}
}();

FormMessage = Ext.extend(Ext.Container, {
	arrContent : null,
	arrType : null,
	errorClass : 'errorBlock',
	warningClass : 'warningBlock',
	infoClass : 'infoBlock',
	haveErrorButton : true,
	haveInfoButton : true,
	
	initComponent : function() {
		this.errorButton = new Ext.form.Label({
			text : "OK",
			cls : 'form-message-ok-button'
		});
		this.errorSection = new Ext.Container({
			cls : this.errorClass,
			hidden : true,
			items : []
		});
		if(this.haveErrorButton){
		    this.errorSection.add(this.errorButton)
		}
		this.warningSection = new Ext.Container({
			cls : this.warningClass,
			hidden : true
		});

		this.btnOK = new Ext.form.Label({
			text : "OK",
			cls : 'form-message-ok-button'
		});
		
		this.infoSection = new Ext.Container({
			cls : this.infoClass,
			hidden : true,
			items : []
		});
		
		if(this.haveInfoButton) {
		    this.infoSection.add(this.btnOK);
        }

		this.items = [ this.errorSection, this.warningSection, this.infoSection ];

		if (this.arrContent != null && this.arrType != null) {
			this.addListener('afterrender', function() {
				this.showMessages(this.arrType, this.arrContent);
			}, this);
		}
		
		FormMessage.superclass.initComponent.call(this);

		this.addEvents('okclick');
	},

	// private
	afterRender : function() {
		FormMessage.superclass.afterRender.call(this);
		if (this.haveInfoButton) {
    		this.btnOK.on('afterrender',function(){
    		    this.btnOK.getEl().on('click', this.okButtonClick, this);
    		}, this);
		}
		this.errorButton.on('afterrender',function(){
            this.errorButton.getEl().on('click', this.okButtonClick, this);
        }, this);
	},
	
	okButtonClick : function(btn, e) {
		var warn = this.warningSection;
		var error = this.errorSection;
		var info = this.infoSection;
		
		this.items.each(function(section) {
			if(section.isVisible()) {
				section.setVisible(false);
			}
		}, this);
		this.hide();
		this.ownerCt.doLayout();
		this.fireEvent('okclick', this);
	},

	// add messages of one type to existing messages in the component
	addMessages : function(type, arrContents) {
		var section = this.items.itemAt(type);
		if (typeof arrContents != 'undefined') {
            for ( var i = 0; i < arrContents.length; i++) {
                section.add(new Ext.BoxComponent({
                    html : arrContents[i]
                }));
            }
        }
        section.doLayout(false, true);
        section.setVisible(true);
	},

	/**
	 * remove messages of one type in the component. The messages deleted
	 * determined by their indexes
	 * 
	 * @param type :
	 *            message type
	 * @param arrIndexes :
	 *            the array of message indexes
	 */
	removeMessages : function(type, arrIndexes) {
		var section = this.items.itemAt(type);
		if (typeof arrIndexes != 'undefined') {
			for ( var i = 0; i < arrIndexes.length; i++) {
				section.remove(section.items.itemAt(arrIndexes[i]));
			}
		}
	},

	/**
	 * Reload contents in FormMessage.
	 * 
	 * @param types:
	 *            array of message types
	 * @param arrContents:
	 *            array of contents. The number of elements in this array must
	 *            be the same to {@link types} length.
	 */
	showMessages : function(types, arrContents) {
		// clear the message field first
		this.clearMessages();

		if (typeof arrContents != 'undefined') {
			// Add type and content to message field
			for ( var i = 0; i < types.length; i++) {
				var section = this.items.itemAt(types[i]);
				//if(section){
				    section.add(new Ext.BoxComponent({
	                    html : arrContents[i]
	                }));
				    section.setVisible(true);
				//}
			}
		}

		this.doLayout(false, true);
	},

	/**
	 * Clear the message field
	 */
	clearMessages : function() {
		for ( var i = 0; i < this.items.length; i++) {
			var section = this.items.itemAt(i);
			if (i != FormMessageType.INFO
					&& i != FormMessageType.ERROR) {
				section.removeAll();
			} else {
				var len = section.items.length;
				for ( var j = len - 1; j > 0; j--) {
					section.remove(section.items.itemAt(j));
				}
			}
			section.setVisible(false);
		}
	},
	
	clearMessagesAndHide : function() {
		this.clearMessages();
		this.hide();
	}
});